F2E合作社｜popovers彈跳提示框｜Bootstrap 5網頁框架開發入門

前言

彈跳提示框有分兩種：

1. 含羞草 tooltip
2. 捕蠅草 popover

今天要講的是 popover ，它跟捕蠅草一樣，只要碰觸到就會迅速的觸發，想知道它是怎麼作用的嗎？那就繼續看下去吧。

（ 圖片來源 ）

官方網站的 Popovers 頁面

在開始使用彈跳提示框之前，需要了解的事情

• 彈出提示框需依靠第三方函式庫 Popper 進行定位。必須在 bootstrap.js 之前引入 popper.min.js 或是使用已經包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js 讓彈出提示框運作。
• 彈出提示框需要 工具提示 作為依賴項目。
• 出於效能上的考量，彈出提示框是選擇性加入的，因此必須自行初始化。
• title 和 content 值為空時，將永遠不會顯示彈出提示框。
• 強調 container: 'body' 以避免在更複雜的元件 ( 例如 Input 群組、 button 群組等等 )中出現渲染問題。
• 在隱藏的元素中，觸發彈出提示框是不會作用的。
• .disabled 或 disabled 元素的彈出提示框必須在外層元素上觸發。
• 當在跨多行的錨點中觸發時，彈出提示框會定位於整體寬度的中間。在您的 <a> 元素上使用 .text-nowrap 來避免這樣的行為。
• 必須先隱藏彈出提示框，然後才能從 DOM 中刪除相應的元素。

啟用彈出提示框

在頁面上初始化所有彈出提示框的一種方法是透過 data-bs-toggle 屬性，記得要放在 bootstrap.bundle.min.js 後面。

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
})

使用 container 選項

當在父元素上有一些干擾彈出提示框的樣式時，需要指定一個自訂的 container ，以便讓彈出提示框的 HTML 顯示在該元素中。

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
    container: 'body'
})

基本彈跳提示框

在 title 裡放上標題，在 data-bs-content 裡輸入提示框的內容。

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

四個方向

共有四個選項： top , right , bottom , 和 left 對齊，在 Bootstrap 的 RTL 中，方向會被鏡像。

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
    Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
    Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
    Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
    Popover on left
</button>

下次點擊時移除

使用 focus 觸發，當用戶點擊切換元素以外的其他元素時，會移除這個彈出提示框。

下次點擊移除必須使用特定標籤

為了跨瀏覽器與跨平台運用，您必須使用 <a> 標籤, 而不是 <button> 標籤，且必須包含 tabindex 屬性.

HTML

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

JavaScript

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
    trigger: 'focus'
})

禁用元素

具有 disabled 屬性的元素是不能互動的，也就是說使用者無法 hover 或是點擊它們來觸發彈出提示框（ 或是工具提示框 ）。如果想要啟用，請從外層的 <div> 或 <span> 觸發彈出提示框，最好使用 tabindex ='0' 使鍵盤聚焦。

對於禁用的彈出提示框觸發，您可能傾向使用 data-bs-trigger="hover focus" 來直接為用戶提供視覺回饋，因為用戶預期不會去點擊禁用的元素。

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
    <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

參考資料

1. Popovers · Bootstrap v5.0
2. 彈出提示框 (Popovers) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
3. Tooltip與Popover提示訊息-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學